<template>
  <div
    v-loading="loading"
    element-loading-text="发送中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div style="margin-top: 30px">
      <el-input
        type="text"
        v-model="searchForm.searchParams"
        placeholder="xxxxxx宣讲会"
        auto-complete="off"
        style="width: 200px"
      ></el-input>
      <el-button
        plain
        type="primary"
        icon="el-icon-search"
        @click="search"
      ></el-button>
    </div>
    <el-divider></el-divider>
    <div v-for="item in list" :key="item.aid">
      <el-descriptions class="margin-top" :title="item.name" :column="3" border>
        <template slot="extra">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-message"
            @click="send(item)"
            >发送通知邮件</el-button
          >
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user-solid"></i>
            预约人
          </template>
          {{ item.gname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location"></i>
            地点
          </template>
          {{ item.localtion }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-time"></i>
            开始时间
          </template>
          <el-date-picker
            type="datetime"
            readonly
            v-model="item.time"
          ></el-date-picker>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-open"></i>
            完成状态
          </template>
          {{ item.finish }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            电话号码
          </template>
          {{ item.phone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-message"></i>
            qq邮箱
          </template>
          {{ item.email }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
export default {
  name: "RecommendEnterpriseappointment",

  data() {
    return {
      searchForm: {
        searchParams: "",
      },
      list: [],
      dialogFormVisible: false,
      form: {
        email: "",
        emailTitle: "",
        access: "",
        time: new Date(),
        company: "",
        localtion: "",
      },
      loading: false,
    };
  },

  mounted() {
    this.loadList();
  },

  watch: {
    "searchForm.searchParams": function (newVal) {
      if (newVal === "") {
        this.loadList();
      } else {
        return;
      }
    },
  },

  methods: {
    // 加载数据
    loadList() {
      this.$axios
        .post("/appointment/load")
        .then((res) => {
          if (res.data.result != null) {
            this.list = res.data.result;
          } else {
            return;
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: "系统错误!!!",
            type: "error",
          });
        });
    },
    // 搜索
    search() {
      if (this.searchForm.searchParams === "") {
        this.$message({
          message: "输入框无内容",
          type: "error",
        });
        return;
      }
      this.$axios
        .post("/appointment/search", this.searchForm)
        .then((res) => {
          if (res.data.result != null) {
            this.list = res.data.result;
          } else {
            return;
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: "系统错误!!!",
            type: "error",
          });
        });
    },
    // 发送通知邮件
    send(item) {
      this.form.email = item.email;
      this.form.emailTitle = item.name;
      this.form.access = item.gname;
      this.form.time = item.time;
      this.form.company = item.company;
      this.form.localtion = item.localtion;
      this.loading = true;
      this.$axios
        .post("/appointment/send", this.form)
        .then((res) => {
          var response = res.data.desc;
          if (response === "发送失败") {
            this.$message({
              message: "发送失败",
              type: "error",
            });
            return;
          } else if (response === "发送成功") {
            this.$message({
              message: "发送成功",
              type: "success",
            });
            this.loading = false;
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: "系统错误!!!",
            type: "error",
          });
        });
    },
  },
};
</script>

<style scoped>
</style>
